<template>
  <div id="app" class="container">
    <ul class="nav nav-tabs" role="tablist">
      <li :class="index===0 ? 'active' : ''"
      v-for="(list, index) in shoppinglists" :key="index"
      role="presentation">
        <ShoppingListTitleComponent :id="list.id" :title="list.title"></ShoppingListTitleComponent>
      </li>
      <li>
        <a href="#" @click="addShoppingList">
          <i class="glyphicon glyphicon-plus-sign"></i>
        </a>
      </li>
    </ul>
    <div class="tab-content">
      <div :class="index===0 ? 'active' : ''"
      v-for="(list, index) in shoppinglists" :key="index"
      class="tab-pane" role="tabpanel" :id="list.id">
        <ShoppingListComponent :items="list.items" :title="list.title" :id="list.id"></ShoppingListComponent>
      </div>
    </div>
  </div>
</template>

<script>
import ShoppingListComponent from './components/ShoppingListComponent'
import ShoppingListTitleComponent from './components/ShoppingListTitleComponent'
import store from './vuex/store'
import { mapGetters, mapActions } from 'vuex'
import _ from 'underscore'

export default {
  store,
  components: {
    ShoppingListComponent,
    ShoppingListTitleComponent
  },
  computed: mapGetters({
    shoppinglists: 'getLists'
  }),
  methods: _.extend({}, mapActions(['populateShoppingLists', 'createShoppingList']), {
    addShoppingList () {
      let list = {
        title: 'New Shopping List',
        id: _.uniqueId(),
        items: []
      }
      this.createShoppingList(list)
    }
  }),
  mounted () {
    this.populateShoppingLists()
  }
}
</script>

<style scoped>
.container {
  width: 40%;
  margin: 20px auto 0px auto;
}
</style>
